<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:ui="http://java.sun.com/jsf/facelets">

<composite:interface>
  <composite:attribute name="value"
    type="org.zanata.ui.model.statistic.WordStatistic" required="true"/>
  <composite:attribute name="type"
    shortDescription="Type of statistic bar, 'large' or leave empty for default"/>
</composite:interface>
<composite:implementation>

  <div
    class="#{cc.attrs.type eq 'large' ? 'progress-bar--large' : 'progress-bar'}">

    <ui:fragment rendered="#{cc.attrs.value != null}">
      <ui:param name="translated" value="#{cc.attrs.value.translated}"/>
      <ui:param name="fuzzy" value="#{cc.attrs.value.needReview}"/>
      <ui:param name="rejected" value="#{cc.attrs.value.rejected}"/>
      <ui:param name="approved" value="#{cc.attrs.value.approved}"/>
      <ui:param name="untranslated" value="#{cc.attrs.value.untranslated}"/>
      <ui:param name="remainingHours"
        value="#{cc.attrs.value.remainingHours}"/>
      <ui:param name="total" value="#{cc.attrs.value.total}"/>

      <ui:fragment rendered="#{total gt 0}">
        <ui:param name="approved_percentage"
          value="#{statisticBar.formatPercentage(cc.attrs.value.percentApproved)}"/>
        <ui:param name="translated_percentage"
          value="#{statisticBar.formatPercentage(cc.attrs.value.percentTranslated)}"/>
        <ui:param name="fuzzy_percentage"
          value="#{statisticBar.formatPercentage(cc.attrs.value.percentFuzzy)}"/>
        <ui:param name="rejected_percentage"
          value="#{statisticBar.formatPercentage(cc.attrs.value.percentRejected)}"/>
        <ui:param name="untranslated_percentage"
          value="#{statisticBar.formatPercentage(cc.attrs.value.percentUntranslated)}"/>

        <span class="progress-bar__approved"
          title="#{approved_percentage}% #{msgs['jsf.stats.Approved']}, #{approved} words"
          style="width: #{approved_percentage}%;">
          <span class="is-invisible">#{msgs['jsf.stats.Approved']}</span>
        </span>
        <span class="progress-bar__translated"
          title="#{translated_percentage}% #{msgs['jsf.stats.Translated']}, #{translated} words"
          style="width: #{translated_percentage}%;">
          <span class="is-invisible">#{msgs['jsf.stats.Translated']}</span>
        </span>
        <span class="progress-bar__rejected"
          title="#{rejected_percentage}% #{msgs['jsf.stats.Rejected']}, #{rejected} words"
          style="width: #{rejected_percentage}%; margin-left: #{translated_percentage}%;">
          <span class="is-invisible">#{msgs['jsf.stats.Rejected']}</span>
        </span>
        <span class="progress-bar__fuzzy"
          title="#{fuzzy_percentage}% #{msgs['jsf.stats.Fuzzy']}, #{fuzzy} words"
          style="width: #{fuzzy_percentage}%; margin-left: #{translated_percentage + rejected_percentage}%;">
          <span class="is-invisible">#{msgs['jsf.stats.Fuzzy']}</span>
        </span>
        <span class="progress-bar__untranslated progress-bar__item"
          title="#{untranslated_percentage}% #{msgs['jsf.stats.Untranslated']}, #{untranslated} words"
          style="width: #{untranslated_percentage}%; margin-left: #{translated_percentage + fuzzy_percentage + rejected_percentage}%">
          <span
            class="is-invisible">#{msgs['jsf.stats.Untranslated']}</span>
        </span>
      </ui:fragment>

      <ui:fragment rendered="#{total le 0}">
        <span class="progress-bar__item"
          title="#{msgs['jsf.NoContent']}" style="width: 100%;">
          <span class="is-invisible">#{msgs['jsf.NoContent']}</span>
        </span>
      </ui:fragment>
    </ui:fragment>

    <ui:fragment rendered="#{cc.attrs.value == null}">
      <span class="progress-bar__item"
        title="#{msgs['jsf.NoContent']}" style="width: 100%;">
          <span class="is-invisible">#{msgs['jsf.NoContent']}</span>
        </span>
    </ui:fragment>
  </div>


</composite:implementation>
</html>
